import React, { useState, useEffect } from "react";
import Input from "./Input";
import List from "./List";

// 只要状态一变，整个函数都会再执行一遍
const Todolist = () => {
    /**
     * useState返回的是一个数组，第一项是状态，第二项是更新状态的方法
     * useState可以有多个,一个useSatate控制一个状态
     * useState一定要添加在函数组件的最顶层
     */

    // 数组的解构赋值
    // const [val, setVal] = useState("1234");
    // const [list, setList] = useState([1, 2, 3, 4]);
    // const [num, setNum] = useState(0);

    /*  const [stu, setStu] = useState({ name: "zhangsan", age: 18 });

    !严格模式下，函数组件里面声明函数一定要带上声明变量的标识
    const upDateStu = () => {
        ? 直接传入新的状态值,新的状态的值会直接替换原来的状态
        ? 区分类组件，类组件中只是合并不会替换
        setStu({ ...stu, name: val });
    }; */

    // 将发送请求获取数据的方法放在useEffect中
    // ! useEffect第二个参数传空数组，相当于componentDidMount
    /* 
    ! 类组件中的componentDidMount会执行一次，
    ! 但是挂载阶段componentDidUpdate不会执行，只有更新的时候componentDidUpdate才会执行
    ! 在函数组件中useEffect在挂载阶段也会执行 
    */

    /* 
    useEffect(() => {
    var id = setInterval(() => {
        console.log("setInterval");
           setNum((num) => num + 1); //setNum可以拿到原来的num状态，而函数里面的num只是一个形参
        }, 1000);
        // 会在卸载的时候执行,相当于componentWillunmount
        return () => {
            clearInterval(id);
        };
    }, []);
     */
    // const upDateList = (val) => {
    //     setList([val, ...list]); //异步操作
    //     localStorage.setItem("todolist", JSON.stringify([val, ...list]));
    // };

    // ! useEffect第二个参数传入依赖项，相当于componentDidUpdate
    // ! 如果不传第二个参数，只要有状态变化就会触发函数
    // ! useEffect第一个参数会返回一个函数
    // useEffect(() => {
    //     console.log(list);
    //     localStorage.setItem("todolist", JSON.stringify(list));
    // }, [list]);

    return (
        <div>
            {/* <div>
                name:{stu.name}---age:{stu.age}
            </div> */}

            {/* <Input upDateList={upDateList} /> */}
            <Input />

            {/* 每隔一秒自动加一 */}
            {/* <h2>{num}</h2> */}

            {/* <button onClick={upDateStu}>更新学生信息</button> */}

            {/* <List list={list} /> */}
            <List />

            {/* <button onClick={upDateList}>更新列表</button> */}
        </div>
    );
};

export default Todolist;

// const fn = () => {
//     let num = 100;
//     return () => {
//         num++;
//         console.log(num);
//     };
// };
// const f1 = fn();
// f1();
